<template>
  <div class="profile-container">
    <!-- 语言切换按钮 -->
    <div class="language-switcher-container">
      <LanguageSwitcher type="text" custom-class="language-switcher-btn" />
    </div>
    
    <div class="profile-card">
      <div class="profile-header">
        <img :src="logoUrl" alt="Logo" class="logo" />
        <h1 class="title">Profile Center</h1>
      </div>

      <div class="profile-content">
        <div class="info-section">
          <h3>Account Information</h3>
          <div class="info-item">
            <span class="label">Email: </span>
            <span class="value">{{ userInfo?.username || 'Not Set' }}</span>
          </div>
          <div class="info-item">
            <span class="label">Login Status: </span>
            <span class="value status-logged-in">Logged In</span>
          </div>
        </div>

        <div class="actions-section">
          <el-button 
            type="danger"
            @click="handleLogout"
            :loading="logoutLoading"
            size="large"
            class="logout-btn"
          >
          Logout
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus'
import LanguageSwitcher from '../components/LanguageSwitcher.vue'

export default {
  name: 'Profile',
  components: {
    LanguageSwitcher
  },
  setup() {
    const router = useRouter()
    const store = useStore()
    const logoutLoading = ref(false)
    
    const userInfo = computed(() => store.getters.userInfo)
    
    // 检查用户是否已登录，如果没有则跳转到登录页
    if (!store.getters.isLoggedIn) {
      console.log('User not logged in, redirecting to login')
      router.push('/login')
      return
    }
    
    // 获取logo图片URL
    const logoUrl = computed(() => {
      const shopData = store.getters.shopData
      const imgUrl = store.state.imgUrl
      
      if (shopData && shopData.logo_img) {
        const fullUrl = imgUrl + shopData.logo_img
        return fullUrl
      }
      
      // 如果没有获取到logo_img，则使用默认图片
      return new URL('@/assets/lgo.png', import.meta.url).href
    })

    // 获取当前语言的文本
    const getCurrentText = (chineseText, englishText) => {
      if (!chineseText || !englishText) return chineseText || englishText || ''
      return store.getters.currentLanguage === 'zh' ? chineseText : englishText
    }

    const handleLogout = async () => {
      try {
        await ElMessageBox.confirm(
          'Are you sure you want to logout?',
          'Confirm Logout',
          {
            confirmButtonText: 'Confirm',
            cancelButtonText: 'Cancel',
            type: 'warning',
          }
        )
        
        logoutLoading.value = true
        try {
          await store.dispatch('logout')
          ElMessage.success({
            message: 'Logged out successfully',
            offset: 100,
            duration: 5000
          })
          router.push('/login')
        } catch (error) {
          console.error('退出登录失败:', error)
          ElMessage.error({
            message: 'Logout failed, please try again',
            offset: 100,
            duration: 5000
          })
        } finally {
          logoutLoading.value = false
        }
      } catch (error) {
        // 用户取消操作，不需要处理
      }
    }

    return {
      userInfo,
      logoutLoading,
      handleLogout,
      logoUrl,
      getCurrentText
    }
  }
}
</script>

<style lang="scss" scoped>
.profile-container {
  position: relative;
  min-height: 100vh;
  background-image: url('@/assets/bbbggg.png');
  background-size: 100% 100%;
}

.language-switcher-container {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  
  .language-switcher-btn {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #667eea;
    transition: all 0.3s ease;
    
    &:hover {
      background: rgba(255, 255, 255, 1);
      color: #5a6fd8;
      transform: translateY(-1px);
    }
  }
  
  // 移动端样式
  @media (max-width: 768px) {
    top: 15px;
    right: 15px;
    
    .language-switcher-btn {
      padding: 6px 12px;
      font-size: 12px;
    }
  }
}

.profile-container {
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  padding-top: .5rem;

  // 桌面端样式
  @media (min-width: 1200px) {
    padding-right: 1rem;
  }
  
  // 移动端样式
  @media (max-width: 768px) {
    background-image: url('@/assets/bbbggg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-top: 1.5rem;
  }
}

.profile-card {
  background: white;
  backdrop-filter: blur(20px);
  border-radius: 24px;
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  padding: 48px;
  width: 100%;
  max-width: 460px;
  position: relative;
  z-index: 1;
  
  // 桌面端样式
  @media (min-width: 1200px) {
    max-width: 520px;
    padding: 56px;
    border-radius: 28px;
  }
  
  // 平板端样式
  @media (min-width: 769px) and (max-width: 1199px) {
    max-width: 500px;
    padding: 52px;
  }
  
  // 移动端样式
  @media (max-width: 768px) {
    padding: 32px 24px;
    border-radius: 20px;
    margin: 0 12px;
  }
}

.profile-header {
  text-align: center;
  margin-bottom: 32px;
  
  .logo {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    
    // 桌面端样式
    @media (min-width: 1200px) {
      width: 104px;
      height: 104px;
      margin-bottom: 24px;
    }
    
    @media (max-width: 768px) {
      width: 72px;
      height: 72px;
      margin-bottom: 16px;
    }
  }
  
  .title {
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
    
    // 桌面端样式
    @media (min-width: 1200px) {
      font-size: 36px;
      margin-bottom: 16px;
    }
    
    @media (max-width: 768px) {
      font-size: 28px;
    }
  }
  
  .subtitle {
    font-size: 16px;
    color: #64748b;
    margin: 0;
    font-weight: 400;
    
    // 桌面端样式
    @media (min-width: 1200px) {
      font-size: 18px;
    }
    
    @media (max-width: 768px) {
      font-size: 14px;
    }
  }
}

.profile-content {
  .info-section {
    margin-bottom: 32px;
    
    // 桌面端样式
    @media (min-width: 1200px) {
      margin-bottom: 40px;
    }
    
    h3 {
      font-size: 18px;
      font-weight: 600;
      color: #334155;
      margin-bottom: 16px;
      padding-bottom: 8px;
      border-bottom: 1px solid #e2e8f0;
      
      // 桌面端样式
      @media (min-width: 1200px) {
        font-size: 20px;
        margin-bottom: 20px;
        padding-bottom: 10px;
      }
    }
    
    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 0;
      border-bottom: 1px solid #f1f5f9;
      
      // 桌面端样式
      @media (min-width: 1200px) {
        padding: 18px 0;
      }
      
      .label {
        font-weight: 500;
        color: #64748b;
        font-size: 15px;
        
        // 桌面端样式
        @media (min-width: 1200px) {
          font-size: 16px;
        }
      }
      
      .value {
        color: #334155;
        font-size: 15px;
        
        // 桌面端样式
        @media (min-width: 1200px) {
          font-size: 16px;
        }
        
        &.status-logged-in {
          color: #10b981;
          font-weight: 600;
        }
      }
    }
  }
  
  .actions-section {
    .logout-btn {
      width: 100%;
      height: 56px;
      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
      border: none;
      border-radius: 16px;
      color: white;
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s;
      }
      
      &:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(239, 68, 68, 0.4);
        
        &::before {
          left: 100%;
        }
      }
      
      &:active:not(:disabled) {
        transform: translateY(0);
      }
      
      &:disabled {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
      }
      
      // 桌面端样式
      @media (min-width: 1200px) {
        height: 60px;
        font-size: 20px;
        border-radius: 18px;
      }
      
      @media (max-width: 768px) {
        height: 52px;
        font-size: 16px;
        border-radius: 14px;
      }
    }
  }
}

// 响应式优化
@media (max-width: 480px) {
  .profile-card {
    padding: 24px 20px;
    margin: 0 12px;
  }
  
  .profile-header .title {
    font-size: 24px;
  }
  
  .profile-header .subtitle {
    font-size: 13px;
  }
}
</style> 